<template>
  <div>
    <div class="p2 border-1 border-solid border-[var(--el-border-color)]">
      <Permissions :value="getActions()" />
    </div>
    <ElTabs v-model="activeName" tab-position="top" class="mt2">
      <ElTabPane :name="userAction.id" :label="`${userAction.name}(${userAction.roleActions.length + 1})`">
        <ElTabs v-model="actives[userAction.id]" tab-position="left">
          <ElTabPane :name="userAction.id" :label="`${userAction.name}(${userAction.actions.length})`">
            <Permissions :value="userAction.actions" />
          </ElTabPane>
          <ElTabPane v-for="(roleAction, i) in userAction.roleActions" :name="roleAction.id" :label="`${roleAction.name}(${roleAction.actions.length})`" :key="i">
            <Permissions :value="roleAction.actions" />
          </ElTabPane>
        </ElTabs>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script setup lang="ts">
  import { ElTabs, ElTabPane } from 'element-plus'
  import { reactive, ref } from 'vue';
  import Permissions from './Permissions.vue';
  import { OrganizationAction } from '@/seed-application/types';

  const props = defineProps<{ detail: OrganizationAction }>()
  const detail = props.detail

  const userAction = reactive({
    id: detail.id,
    name: detail.name,
    actions: detail.actions || [],
    roleActions: detail.roleActions
  })
  const activeName = ref(userAction.id)
  const actives = reactive({})
  actives[userAction.id] = userAction.id

  function getActions() {
    const ret = [ ...userAction.actions ]
    for(const roleAction of userAction.roleActions) ret.push(...roleAction.actions)

    return Array.from(new Set(ret))
  }
</script>
<style lang="less" scoped>
  .side {
    grid-template-columns: 150px auto;
    grid-template-rows: auto;
    column-gap: 5px;
  }
</style>
